<template>
	<view class="menu-c">
		<view class="items-c" v-for="(item , index) in CategoryList" :key="index" @click="itemFun(index)">
			{{item.showName}}
			<view class="bot-set "
				:class="index==menusIndex? 'animate__animated animate__backInLeft':'animate__animated animate__backOutLeft'">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "qyMenus",
		data() {
			return {

			};
		},
		// provide: {
		// 	menusIndex: Number,
		// 	CategoryList: Array
		// },
		props: {
			menusIndex: Number,
			CategoryList: Array
		},
		watch: {
			CategoryList() {
				console.log('改变', )
				this.$nextTick()
			}
		},
		computed: {
			sss() {
				return this.CategoryList
			}
		},
		created() {
			console.log('this.CategoryList1111', this.CategoryList)

		},
		methods: {
			itemFun(e) {
				// this.curIndex = e
				this.$emit('receive', e)

			}
		}
	}
</script>
<style lang="scss" scoped>
	.menu-c {
		width: 124px;
		display: flex;
		// height: 92.7vh;
		// background: red;
		background: $qy-bg-nav-color;
		display: flex;
		flex-direction: column;
		padding-left: 20px;
		z-index: 2;

		.items-c {
			position: relative;
			color: $uni-text-color;
			width: 100%;
			text-align: center;
			padding: 16px 0;

		}

		// .itemNo {
		// 	position: relative;
		// 	color: $uni-text-color-inverse;
		// 	width: 100%;
		// 	text-align: center;
		// 	padding: 16px 0;

		// }

		.bot-set {
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			border-radius: 10px 0 0 10px;
			background: linear-gradient(90deg, #FE8E04 0%, rgba(254, 142, 4, 0.61) 60%, rgba(254, 142, 4, 0) 100%);
		}


	}
</style>